<template>
  <!-- 使用拖拽组件需要注意v-model绑定的值与被拖拽的列表数据一致 -->
  <App-draggable v-model="modelValue">
    <el-tag
      v-for="item in modelValue"
      :key="item.label"
      class="mx-1"
      :type="item.type"
      effect="dark"
    >
      {{ item.label }}
    </el-tag>
  </App-draggable>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const modelValue = ref([
  { type: '', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'danger', label: 'Tag 4' },
  { type: 'warning', label: 'Tag 5' }
])
</script>
